<template>
	<view>
		<div style="background-color: #929292;width:100%;height:180px" v-for="(item,index) in topicLabelbyid" :key="index" >
			<div v-for="(ele,index) in item.url" :key="index">
				<img :src="ele.split(',')[0]" style="width:80px;height:80px;float:left;margin-top:65px;margin-left:10px"></img>
			</div>
			<div style="float:left;margin-top:50px" class="div_1">
				<p style="font-weight:bold;margin-top:20px">#{{item.topicName}}</p>
				<p style="font-size: 15px;">锁骨以下</p>
				<p style="font-size: 13px;color:#E4E4E4"><span>{{topicLabelbyidNum}}片话题</span> 
				<span>{{item.topicViews}}次浏览</span></p>
			</div>
			<button class="span_2" style="float:left"  >+关注</button>
		</div>
		<div>
			 <u-tabs
				:list="list4"
				lineWidth="30"
				lineColor="#f56c6c"
				:current="current"
				@change="change"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 45px; padding-right: 45px; height: 34px;"
			>
			</u-tabs>
			<view v-if="current == 0"> 
				<div @click="htzy(item1.releaseTopicId)" v-for="(item1,index) in topicLabeltj" :key="index" style="width:160px;height:310px;float: left;margin-left:10px;margin-top:10px">
					<div v-for="(ele,index) in item1.url" :key="index">
						<img :src="ele.split(',')[0]" style="width:160px;height:230px;float:left;margin-top:25px;margin-left:10px"></img>
					</div>
					<p style="font-weight: bold;font-size: 14px;margin-left:10px">#{{item1.releaseTopicTitle}}</p>
					<img :src="imgUrl" style="border-radius: 30px 30px 30px 30px;width:30px;height:30px;float:left;margin-top:5px;margin-left:10px"></img>
					<p style="margin-top:10px;margin-left:50px">GC</p>
				</div>
			</view>
			<view v-if="current == 1"> 
				 <div @click="htzy(item2.releaseTopicId)" v-for="(item2,index) in topicLabelzx" :key="index" style="width:160px;height:310px;float: left;margin-left:10px;margin-top:10px">
					<div v-for="(ele,index) in item2.url" :key="index">
						<img :src="ele.split(',')[0]" style="width:160px;height:230px;float:left;margin-top:25px;margin-left:10px"></img>
					</div>
					<p style="font-weight: bold;font-size: 14px;margin-left:10px">#{{item2.releaseTopicTitle}}</p>
					<img :src="imgUrl" style="border-radius: 30px 30px 30px 30px;width:30px;height:30px;float:left;margin-top:5px;margin-left:10px"></img>
					<p style="margin-top:10px;margin-left:50px">GC</p>
				 </div>
			</view>
			<view v-if="current == 2"> 
				<div @click="htzy(item3.releaseTopicId)" v-for="(item3,index) in topicLabelzr" :key="index" style="width:160px;height:310px;float: left;margin-left:10px;margin-top:10px">
					<div v-for="(ele,index) in item3.url" :key="index">
						<img :src="ele.split(',')[0]" style="width:160px;height:230px;float:left;margin-top:25px;margin-left:10px"></img>
					</div>
					<p style="font-weight: bold;font-size: 14px;margin-left:10px">#{{item3.releaseTopicTitle}}</p>
					<img :src="imgUrl" style="border-radius: 30px 30px 30px 30px;width:30px;height:30px;float:left;margin-top:5px;margin-left:10px"></img>
					<p style="margin-top:10px;margin-left:50px">GC</p>
				</div>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				imgUrl: 'http://c.svner.cn/19.jpg',
				 list4: [{
					name: '推荐'
				}, {
					name: '最新'
				}, {
					name: '最热'
				}],
				id: '',
				// 话题列表
				topicLabelbyid: [],
				// 推荐
				topicLabeltj: [],
				// 最新
				topicLabelzx: [],
				// 最热
				topicLabelzr: [],
				// 查询话题总数
				topicLabelbyidNum:[],
			}
		},
		onLoad(option) {
			this.id=option.id
			// 查询话题
			this.huati()
			// 查询推荐话题
			this.tuijian()
			// 查询最新话题
			this.zuixin()
			// 查询最热话题
			this.zuire()
			// 查询话题总数
			this.lablenum()
		},
		methods: {
			// 跳转话题详情
			htzy (releaseTopicId) {
				uni.navigateTo({
					url: '../index/topicDetail?id=' + releaseTopicId
				})
			},
			change(index) {
			  this.current = index.index;
			  //如报错则用this.current = index代替上行
			},
			// 查询话题总数
			lablenum () {
				this.$axios({
					url: '/contents/getTopicLabelByIdNum?id=' + this.id,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.topicLabelbyidNum = res.data.object
						}
					}
				})
			},
			// 查询话题
			huati () {
				this.$axios({
					url: '/contents/getTopicLabelById?id=' + this.id,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							debugger
							this.topicLabelbyid = res.data.object
						}
					}
				})
			},
			//查询推荐话题
			tuijian () {
				this.$axios({
					url: '/contents/getTopicOne?id=' + this.id,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.topicLabeltj = res.data.object
						}
					}
				})
			},
			// 查询最新话题
			zuixin () {
				this.$axios({
					url: '/contents/getTopicTwo?id=' + this.id,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.topicLabelzx = res.data.object
						}
					}
				})
			},
			// 查询最热话题
			zuire () {
				this.$axios({
					url: '/contents/getTopicSu?id=' + this.id,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.topicLabelzr = res.data.object
						}
					}
				})
			}
		}
	}
</script>

<style>
	.div_1 p {
		margin-top:8px;
		margin-left:10px;
		color: aliceblue;
	}
	.span_2{
		margin-left: 10%;
		margin-top:120px;
		height: 25px;
		width: 80px;
		border-radius: 20px 20px 20px;
		line-height: 180%;
		background-color: #3B3B3B;
		color: white;
		font-size: 13px;
	}
</style>
